<!--
 * @Date: 2022-11-21 15:10:27
 * @LastEditTime: 2023-02-09 15:37:39
 * @Description: content
-->
<template>
  <view class="page-wrap">
    <view class="page-container">
      <!-- 顶部标题栏 -->
      <view class="header">
        <view class="title-image">
          <img src="/static/images/sg_header.png" alt="" />
        </view>
        <view class="buttons-container">
          <view class="buttons">
            <view
              class="btn-draw"
              :class="{ active: activeTab === 'process' }"
              @click="switchTab('process')"
            >
              待处理
            </view>
            <view
              class="btn-prize"
              :class="{ active: activeTab === 'delivered' }"
              @click="switchTab('delivered')"
            >
              已提货
            </view>
          </view>
        </view>
      </view>

      <!-- 搜索/过滤区域 -->
      <view class="search-bar">
        <view class="search-input-wrapper">
          <input type="text" placeholder="输入内容" class="search-input" />
          <view class="search-icon">
            <view class="circle-icon">
              <img src="/static/images/hg_srarch.png" alt="" />
            </view>
          </view>
        </view>
      </view>

      <!-- 柜子主体 - 显示基于当前活动标签 -->
      <view class="cabinet-container" v-if="activeTab === 'process'">
        <view class="cabinet">
          <!-- 顶部提示 -->
          <view class="cabinet-header">贡品共 {{ listData.length || 'XX' }} 个</view>

          <view class="cabinet-content">
            <!-- 根据数据生成架子和商品 -->
            <block v-for="(row, rowIndex) in groupedProducts" :key="rowIndex">
              <!-- 每一行架子 -->
              <view class="shelf">
                <view
                  class="box"
                  v-for="(item, colIndex) in row"
                  :key="'item-' + colIndex"
                  @click="selectBox(rowIndex + 1, colIndex + 1, item.id)"
                  :class="{ selected: isBoxSelected(item.id) }"
                >
                  <image
                    class="box-image"
                    :src="item.thumb || 'https://img1.baidu.com/it/u=4264737681,1512135019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625'"
                  ></image>
                  <view class="select-indicator"></view>
                </view>
              </view>
              
              <!-- 每行之后的分割线和序号 -->
              <view class="shelf-divider" :style="rowIndex === Math.ceil(listData.length / 4) - 1 ? 'margin-bottom: 100rpx' : ''">
                <image class="divider-image" src="/static/images/hg_fg.png"></image>
                <view class="number-discs">
                  <view class="disc-container" v-for="(item, colIndex) in row" :key="'disc-' + colIndex">
                    <image class="disc-image" src="/static/images/hg_yp.png"></image>
                    <view class="disc-number">{{ colIndex + 1 }}</view>
                  </view>
                </view>
              </view>
            </block>
          </view>

          <!-- 底部装饰 -->
          <view class="cabinet-bottom"></view>
        </view>
      </view>

      <!-- 已提货的内容 -->
      <view class="delivered-content" v-if="activeTab === 'delivered'">
        <view class="empty-state">
          <view class="empty-text">暂无已提货商品</view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="footer">
        <!-- 全选选项 -->
        <view class="select-all" @click="selectAll">
          <image class="select-all-icon" :src="isAllSelected ? '/static/images/hg_xz.png' : '/static/images/hg_wx.png'"></image>
          <text class="select-all-text">全选</text>
        </view>
        
        <!-- 右侧按钮 -->
        <view class="button-group">
          <view class="btn-again">
            <image class="btn-image" src="/static/images/hg_fh.png"></image>
          </view>
          <view class="btn-redeem" @click="showExchangeDialog">
            <image class="btn-image" src="/static/images/hg_jf.png"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 兑换说明弹窗 -->
    <view class="exchange-popup" v-if="showExchangeConfirm">
      <view class="exchange-popup-content">
        <view class="exchange-popup-header">
          兑换说明
          <view class="close-btn" @click="closeExchangePopup">
            <image src="/static/images/gb.png" class="close-icon"></image>
          </view>
        </view>
        <view class="exchange-popup-body">
          <view class="exchange-title">是否要兑换成XXXX</view>
          <view class="exchange-description">
            兑换后，货品<text class="red-text">不可被找回</text>；魔色石<text class="red-text">不可兑换、交易</text>或者<text class="red-text">转让或抵扣</text>，<text class="red-text">仅可用于合成商品</text>，请谨慎操作；确认兑换后，对应魔色石将立刻发送至您的账户～
          </view>
          <view class="checkbox-container" @click="toggleDoNotShow">
            <view class="checkbox" :class="{ checked: doNotShowAgain }"></view>
            <text>不在弹出</text>
          </view>
          <view class="button-container">
            <view class="cancel-btn" @click="closeExchangePopup">取消</view>
            <view class="confirm-btn" @click="confirmExchange">确认兑换</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品兑换弹窗 -->
    <view class="product-exchange-popup" v-if="showProductExchange">
      <view class="product-exchange-content">
        <view class="product-exchange-header">
          商品兑换
          <view class="close-btn" @click="closeProductExchangePopup">
            <image src="/static/images/gb.png" class="close-icon"></image>
          </view>
        </view>
        <view class="product-exchange-body">
          <view class="product-item">
            <image class="product-image" src="https://img1.baidu.com/it/u=4264737681,1512135019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625"></image>
            <view class="product-info">
              <view class="product-name">商品名</view>
              <view class="product-price">价格：¥11.30</view>
            </view>
            <view class="quantity-control">
              <view class="minus-btn">-</view>
              <view class="quantity">1</view>
              <view class="plus-btn">+</view>
            </view>
          </view>
          <view class="exchange-rules">
            <view class="rule-title">兑换规则</view>
            <view class="rule-content">
              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              XXXXXXXXXXXXXXXXXXXX
            </view>
            <view class="rule-content">
              YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
              XXXXXXXXXXXXXXXXXXXX
            </view>
            <view class="rule-content">
              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              XXXXXXXXXXXXXXXXXXXX
            </view>
            <view class="rule-content">
              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              XXXXXXXXXXXXXXXXXXXX
            </view>
          </view>
          <view class="exchange-footer">
            <view class="exchange-total">
              <view class="total-info">
                <view class="total-count">共1件</view>
                <view class="total-points">合计：<text class="points">2000积分</text></view>
              </view>
              <view class="confirm-exchange-btn" @click="finalConfirmExchange">确认兑换</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <custom-tabbar :current="2" @change="handleTabChange"></custom-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "process", // 默认选中"特处理"标签
      listData: [],
      selectedBoxes: [], // 存储已选中的商品ID
      showExchangeConfirm: false, // 兑换说明弹窗
      showProductExchange: false, // 商品兑换弹窗
      doNotShowAgain: false, // 不再弹出选项
    };
  },

  computed: {
    // 将商品列表按照每行4个进行分组
    groupedProducts() {
      const result = [];
      const itemsPerRow = 4;
      
      if (!this.listData || !this.listData.length) {
        // 返回默认的三行数据用于占位展示
        return Array(3).fill().map(() => Array(4).fill({id: Math.random(), image_url: ''}));
      }
      
      for (let i = 0; i < this.listData.length; i += itemsPerRow) {
        result.push(this.listData.slice(i, i + itemsPerRow));
      }
      
      // 如果最后一行不足4个，补充空白项
      const lastRow = result[result.length - 1];
      if (lastRow && lastRow.length < itemsPerRow) {
        const emptyCount = itemsPerRow - lastRow.length;
        for (let i = 0; i < emptyCount; i++) {
          lastRow.push({id: `empty-${i}`, image_url: ''});
        }
      }
        console.log(result,'result');
        
      return result;
    },
    
    // 检查是否全选
    isAllSelected() {
      if (this.listData.length === 0) return false;
      
      const validItems = this.listData.filter(item => item.id && !item.id.toString().includes('empty'));
      return validItems.length > 0 && validItems.every(item => this.selectedBoxes.includes(item.id));
    }
  },

  onShareAppMessage() {
    return {
      title: `开盲盒 赢好礼!`,
      path: `/pages/box/box`,
    };
  },

  onLoad(options) {
    this.getList();
  },

  methods: {
    // 切换标签方法
    switchTab(tab) {
      if (this.activeTab !== tab) {
        this.activeTab = tab;
        // 根据当前标签加载相应数据
        if (tab === "process") {
          this.getList();
        } else {
          this.getDeliveredList();
        }
      }
    },

    handleTabChange() {},

    getList() {
      this.req({
        url: "/v1/shop/list",
        data: {
          page: 1,
          per_page: 10,
          brand_id: "",
          sort_type: 1,
        },
        Loading: true,
        success: (res) => {
          if (res.code == 200) {
            this.listData = res.data.data;
            this.mescroll &&
              this.mescroll.endBySize(res.data.data.length, res.data.total);
          }
        },
      });
    },

    // 获取已提货列表
    getDeliveredList() {
      this.req({
        url: "/v1/shop/delivered",
        data: {
          page: 1,
          per_page: 10,
        },
        Loading: true,
        success: (res) => {
          if (res.code == 200) {
            this.listData = res.data.data;
            this.mescroll &&
              this.mescroll.endBySize(res.data.data.length, res.data.total);
          }
        },
      });
    },

    // 选择盒子
    selectBox(row, position, itemId) {
      if (!itemId || itemId.toString().includes('empty')) return; // 跳过空白项
      
      const index = this.selectedBoxes.indexOf(itemId);
      if (index === -1) {
        // 如果商品未被选中，则选中它
        this.selectedBoxes.push(itemId);
      } else {
        // 如果商品已被选中，则取消选中
        this.selectedBoxes.splice(index, 1);
      }
    },

    // 检查商品是否被选中
    isBoxSelected(itemId) {
      return this.selectedBoxes.includes(itemId);
    },

    // 全选/取消全选
    selectAll() {
      if (this.listData.length === 0) return;
      
      // 检查是否已经全选
      const validItems = this.listData.filter(item => item.id && !item.id.toString().includes('empty'));
      const isAllSelected = validItems.every(item => this.selectedBoxes.includes(item.id));
      
      if (isAllSelected) {
        // 如果已全选，则取消全选
        this.selectedBoxes = [];
      } else {
        // 否则全选
        this.selectedBoxes = validItems.map(item => item.id);
      }
    },

    // 显示兑换说明弹窗
    showExchangeDialog() {
      this.showExchangeConfirm = true;
    },

    // 关闭兑换说明弹窗
    closeExchangePopup() {
      this.showExchangeConfirm = false;
    },

    // 切换"不再弹出"选项
    toggleDoNotShow() {
      this.doNotShowAgain = !this.doNotShowAgain;
    },

    // 确认兑换，显示商品兑换弹窗
    confirmExchange() {
      this.showExchangeConfirm = false;
      this.showProductExchange = true;
    },

    // 关闭商品兑换弹窗
    closeProductExchangePopup() {
      this.showProductExchange = false;
    },

    // 最终确认兑换
    finalConfirmExchange() {
      // 处理最终兑换逻辑
      this.showProductExchange = false;
      uni.showToast({
        title: '兑换成功',
        icon: 'success'
      });
    },
  },
};
</script>

<style lang="scss">
.page-wrap {
  min-height: 100vh;
  background-color: #f7ebd3;
  display: flex;
  flex-direction: column;
}

.page-container {
  border-radius: 20rpx;
  margin: 20rpx;
}

.header {
  text-align: center;
  background-color: #f7ebd3;
}

.header .title-image {
  width: 100%;
  height: 130rpx;
  margin: 0 auto 20rpx;
  border-radius: 8rpx;
  img {
    width: 100%;
    height: 100%;
  }
}

.header .buttons-container {
  display: flex;
  justify-content: center;
  height: 96rpx;
}

.header .buttons {
  display: flex;
  width: 100%;
  height: 85rpx;
  overflow: hidden;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08);
  border: 4rpx solid#000;
  padding: 10rpx;
  background-color: #e9daba;
}

.header .buttons .btn-draw,
.header .buttons .btn-prize {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.header .buttons .btn-draw {
  background-color: #e9daba;
  color: #8d7356;
  position: relative;
  border-right: 1rpx solid #d6c7a7;
}

.header .buttons .btn-prize {
  color: #8d7356;
  background-color: #e9daba;
}

/* 活动状态样式 */
.header .buttons .btn-draw.active {
  background-color: #f05a55;
  color: #ffffff;
  position: relative;
}

.header .buttons .btn-prize.active {
  background-color: #f05a55;
  color: #ffffff;
}

.search-bar {
  padding: 10rpx 0 10rpx 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
  background-color: #e8e2d5;
  border-radius: 40rpx;
  border: 2rpx solid #d0c7b0;
  padding: 0 30rpx;
  box-sizing: border-box;
  box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 30rpx;
  color: #666;
  padding-right: 70rpx;
  background-color: transparent;
}

.search-icon {
  position: absolute;
  right: 25rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
}

.cabinet-container {
  flex: 1;
  padding: 10rpx;
  margin-bottom: 10rpx;
  position: relative;
}

.cabinet {
  
  width: 100%;
  height: 100%;
  background-image: url("/static/images/hg_bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx 15rpx 0;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  border: 2rpx solid rgba(222, 184, 135, 0.5);
}


.cabinet-header {
  position: absolute;
  top: -18rpx;
  text-align: right;
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  z-index: 2;
  position: relative;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.cabinet-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 0 15rpx;
}

/* 架子样式 */
.cabinet .shelf {
  display: flex;
  justify-content: space-around;
  padding: 15rpx 10rpx 20rpx;
  position: relative;
  z-index: 3;
  margin-bottom: 15rpx;
}

/* 商品盒子 */
.cabinet .shelf .box {
  width: 160rpx;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 4;
  margin-bottom: -20rpx;
}

/* 商品图片 */
.cabinet .shelf .box .box-image {
  width: 140rpx;
  border-radius: 10rpx;
  border: 3rpx solid #333;
  box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 5;
  transform: translateY(10rpx);
  background-color: #333;
}

/* 选中状态 */
.cabinet .shelf .box.selected .box-image {
  border: 3rpx solid #ffcc00;
}

/* 选中指示器 */
.select-indicator {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 34rpx;
  height: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.select-indicator {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.box .select-indicator {
  background-image: url("/static/images/hg_wx.png");
}

.box.selected .select-indicator {
  background-image: url("/static/images/hg_xz.png");
}

.check-icon {
  width: 16rpx;
  height: 10rpx;
  border-left: 3rpx solid #333;
  border-bottom: 3rpx solid #333;
  transform: rotate(-45deg) translate(1rpx, -1rpx);
}

/* 架子分割线 */
.shelf-divider {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 40rpx;
  margin-bottom: 30rpx;
  margin-top: -5rpx;
  box-sizing: border-box;
}

.divider-image {
  width: 100%;
  height: 45rpx;
  object-fit: fill;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
}

/* 数字圆盘样式 */
.number-discs {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 92%;
  z-index: 2;
  top: -15rpx;
  left: 4%;
  right: 4%;
  height: 40rpx;
}

.disc-container {
  position: relative;
  width: 70rpx;
  height: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disc-image {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 3rpx 3rpx rgba(0, 0, 0, 0.25));
}

.disc-number {
  margin-top: 10rpx;
  position: relative;
  z-index: 2;
  color: #fff;
  background-color: #6a5023;
  text-align: center;
  border-radius: 15rpx;
  height: 20rpx;
  line-height: 20rpx;
  padding: 2rpx;
  width: 60%;
  font-size: 24rpx;
}

.cabinet-bottom {
  height: 16rpx;
  background-color: rgba(101, 67, 33, 0.1);
  z-index: 2;
  position: relative;
  border-radius: 0 0 14rpx 14rpx;
}

.footer {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 180rpx;
}

/* 全选样式 */
.select-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80rpx;
}

.select-all-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5rpx;
}

.select-all-text {
  font-size: 24rpx;
  color: #8d7356;
  text-align: center;
}

/* 右侧按钮组 */
.button-group {
  display: flex;
  gap: 20rpx;
}

.footer .btn-again,
.footer .btn-redeem {
  width: 280rpx;
  height: 80rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .btn-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 已提货内容样式 */
.delivered-content {
  padding: 40rpx 20rpx;
  min-height: 400rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 兑换说明弹窗样式 */
.exchange-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.exchange-popup-content {
  width: 90%;
  max-width: 650rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  border: 6rpx solid #e97c48;
}

.exchange-popup-header {
  background-color: #f7b26d;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx;
  text-align: center;
  position: relative;
}

.close-btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 36rpx;
  height: 36rpx;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-icon {
  width: 100%;
  height: 100%;
}

.exchange-popup-body {
  padding: 30rpx;
  background-color: #fffbeb;
}

.exchange-title {
  font-size: 34rpx;
  text-align: center;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.exchange-description {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
  margin-bottom: 40rpx;
}

.red-text {
  color: #e74c3c;
  font-weight: bold;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  cursor: pointer;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-right: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  background-image: url("/static/images/hg_wx.png");
  background-size: 100% 100%;
}

.checkbox.checked {
  background-image: url("/static/images/hg_xz.png");
  background-size: 100% 100%;
}

.button-container {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  font-size: 32rpx;
  cursor: pointer;
}

.cancel-btn {
  background-color: #f9d18b;
  color: #333;
}

.confirm-btn {
  background-color: #e15d57;
  color: #fff;
}

/* 商品兑换弹窗样式 */
.product-exchange-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-exchange-content {
  width: 90%;
  max-width: 650rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  border: 6rpx solid #e97c48;
}

.product-exchange-header {
  background-color: #f7b26d;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx;
  text-align: center;
  position: relative;
}

.product-exchange-body {
  padding: 20rpx;
  background-color: #fffbeb;
}

.product-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 26rpx;
  color: #e74c3c;
}

.quantity-control {
  display: flex;
  align-items: center;
  position: absolute;
  right: 15rpx;
  bottom: 15rpx;
}

.minus-btn, .plus-btn {
  width: 50rpx;
  height: 50rpx;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  border-radius: 6rpx;
  color: #666;
}

.quantity {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

.exchange-rules {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.rule-title {
  font-size: 28rpx;
  margin-bottom: 15rpx;
  color: #666;
  font-weight: bold;
}

.rule-content {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.exchange-footer {
  margin-top: 30rpx;
  border-radius: 0;
}

.exchange-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 20rpx;
  color: #333;
}

.total-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.total-count {
  font-size: 26rpx;
  margin-bottom: 5rpx;
}

.total-points {
  font-weight: normal;
  font-size: 26rpx;
}

.points {
  color: #e74c3c;
  font-size: 28rpx;
  font-weight: bold;
}

.confirm-exchange-btn {
  height: 80rpx;
  background-color: #e15d57;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6rpx;
  font-size: 32rpx;
  cursor: pointer;
  font-weight: bold;
  padding: 0 50rpx;
  white-space: nowrap;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
</style>
